<script setup>
    import { onMounted,onUnmounted,ref,watch } from 'vue'
    import SearchBar from './SearchBar.vue'
    import Dialog from './Dialog.vue'
    import List from './list/List.vue'
    document.addEventListener('keydown', (e) => {
        if (e.key == 'F12') {
            // myApi.openDevTools()
            myApi.log('hello word!', '余威')
        }
    })

  
    const searchBarRef = ref(null)
    const cb = (msg) => {
        // console.log('执行回调函数',searchBarRef.value,msg)
        // if(searchBarRef.value === null){
        //     return
        // }
        console.log(msg)
        searchBarRef.value.handleClick()
    }
    myApi.onOpenDialogEvent(cb)

   
    onMounted(() => {
    })

    onUnmounted(()=>{
        console.log('onUnmounted')
    })

    // watch(
    //     ()=>searchBarRef.value,
    //     (value)=>{
    //         console.log('监听到组件ref变化:',value)
    //     }
    // )
</script>

<template>
    <main>
        <SearchBar ref="searchBarRef"></SearchBar>
        <!-- 传送门,成为body的子组件，可以逃离div为id的vue组件 -->
        <teleport to="body">
            <Dialog></Dialog>
        </teleport>
        <List></List>
    </main>
</template>

